<template>
	<view class="page page-block">
		<cl-message ref="message"></cl-message>
		<view class="head-wrapper">
			<text>修改密码</text>
		</view>
		<view class="input-wrapper">
			<input type="text" password maxlength="16" v-model="oldpw" placeholder="请输入原密码" />
			<input type="text" password maxlength="16" v-model="pw" placeholder="请输入新密码" />
			<input type="text" password maxlength="16" v-model="newpw" placeholder="请再次输入新密码" />
		</view>
		<view class="foot-wrapper">
			<view class="ripple-wrapper" @click="click">确认修改
				<span class="ripple" ref="btn"></span>
			</view>
		</view>
		<view class="tips-wrapper">
			<text>·不能有空格</text>
			<text>·长度为6-16个字符</text>
			<text>·必须包含字母、数字、符号中至少2种</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldpw: '',
				pw: '',
				newpw: ''
			}
		},
		methods: {
			click(e) {
				const query = uni.createSelectorQuery();
				var rect, ripple = this.$refs.btn;
				query.selectAll('.ripple-wrapper').boundingClientRect(data => {
					rect = data[0];
				}).exec();
				ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
				ripple.classList.remove('show');
				var top = e.changedTouches[0].pageY - rect.top - Math.max(rect.width, rect.height) / 2 - document.body.scrollTop;
				var left = e.changedTouches[0].pageX - rect.left - Math.max(rect.width, rect.height) / 2 - document.body.scrollLeft;
				ripple.style.top = top + 'px'
				ripple.style.left = left + 'px'
				ripple.classList.add('show');
				if (this.oldpw.length <= 0 || this.pw.length <= 0 || this.newpw.length <= 0) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "请输入所有项",
						duration: 2000,
						iconSize: 24
					});
					return;
				}
				if (this.oldpw.indexOf(" ") != -1 || this.pw.indexOf(" ") != -1 || this.newpw.indexOf(" ") != -1) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "密码中不能包含空格",
						duration: 2000,
						iconSize: 24
					});
					return;
				}
				if (this.oldpw.length < 6 || this.pw.length < 6 || this.newpw.length < 6) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "密码长度不足6位",
						duration: 2000,
						iconSize: 24
					});
					return;
				}
				if (this.pw != this.newpw) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "两次输入的密码不一致",
						duration: 2000,
						iconSize: 24
					});
					return;
				}
				if (!RegExp(/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?.]+)$)^[\w~!@#$%^&*?.]{6,16}$/).test(this.pw)) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "密码必须包含字母、数字、符号中至少2种",
						duration: 3500,
						iconSize: 24
					});
					return;
				}
				if (this.oldpw == this.pw) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "不能与原密码相同",
						duration: 2000,
						iconSize: 24
					});
					return;
				}
				if (this.$common.user == null || this.$common.user.uid == "") {
					this.$refs["message"].open({
						type: 'cancel',
						message: "请登录后重试",
						duration: 1500,
						iconSize: 24
					});
					setTimeout(function() {
						uni.redirectTo({
							url: "../../../login/login"
						})
					}, 1500)
					return;
				}
				let obj = {
					uid: this.$common.user.uid,
					oldPw: this.oldpw,
					newPw: this.pw
				}
				this.$common.request(this.$serverUrl + "user/changePw", obj, "PUT", this.successCallback);
			},
			successCallback(res) {
				if (res.data.statusCode == "200") {
					if (res.data.msg == "ok") {
						this.$refs["message"].open({
							type: 'success',
							message: "修改成功",
							duration: 2000,
							iconSize: 24
						});
						this.$common.setHasLogin(false);
						this.$common.setUser(null)
						setTimeout(function() {
							uni.switchTab({
								url: "../../../index/index"
							})
						}, 2000)
					} else {
						this.$common.showModal(res.data.msg, false);
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .cl-message {
		&__content {
			font-size: 16px;
		}
	}

	.head-wrapper {
		margin-top: 50rpx;
		text-align: center;
	}

	.head-wrapper text {
		font-size: 18px;
	}

	.input-wrapper {
		padding: 40rpx;
	}

	input {
		font-size: 16px;
		color: #000000;
		background-color: #F5F5F5;
		margin-top: 30rpx;
		height: 60rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		transition: 0.3s ease;
		border: solid 5rpx #F5F5F5;
	}

	input:hover {
		border: solid 5rpx #1f80ff;
	}

	.foot-wrapper {
		padding: 40rpx;
	}

	.foot-wrapper view {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 16px;
		background-color: #2196F3;
		color: #FFFFFF;
	}

	.tips-wrapper {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
	}
	.tips-wrapper text {
		font-size: 14px;
		color: #808080;
	}
</style>
